<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-05 09:45:32
 * @LastEditors: cxguo
 * @LastEditTime: 2020-08-03 14:32:26
 -->
<template>
  <div class="q_menu">
    <ul class="clearfix">
      <li
        v-for="(item, index) in menuData"
        :key="index"
        :class="getItemClassName(index)"
      >
        <a :class="item.textColor" @click="() => {btnClick(item)}">
          <i :class="getIconClass(item)" />
          <p>
            <span class="title">{{ item.title }}</span>
          </p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>

const menuColLen = 2

export default {
  name: 'QuickLaunch',
  data() {
    return {
      menuData: [
        { iconClass: 'icon-sale', textColor: 'color-blue', routerName: 'SaleList', title: '销售' },
        { iconClass: 'icon-store', textColor: 'color-blue', routerName: 'PurchaseList', title: '进货' },
        { iconClass: 'icon-chuku', textColor: 'color-green', routerName: 'StockinList', title: '出库' },
        { iconClass: 'icon-ruku', textColor: 'color-green', routerName: 'StockoutList', title: '入库' },
        { iconClass: 'icon-shangpin', textColor: 'color-blue', routerName: 'GoodsList', title: '商品' },
        { iconClass: 'icon-kehu', textColor: 'color-blue', routerName: 'CustomerList', title: '客户' },
        { iconClass: 'icon-caiwuguanli', textColor: 'color-orange', routerName: 'ComegoDebtReceList', title: '应收欠款' },
        { iconClass: 'icon-szmx', textColor: 'color-orange', routerName: 'DailyincomeList', title: '日常收支' }
      ]
    }
  },
  computed: {
  },
  methods: {
    btnClick(item) {
      const routerName = item.routerName
      this.$router.push({
        name: routerName
      })
    },
    getIconClass(item) {
      return `iconfont ${item.iconClass}`
    },
    getItemClassName(index) {
      const menuLen = this.menuData.length
      if (index === 0) {
        return 'border_lt'
      }
      if (index === menuColLen - 1) {
        return 'border_rt'
      }
      if (index === menuLen - 1) {
        return 'border_rb'
      }
      if (index === menuLen - 2) {
        return 'border_lb'
      }
      if (index % menuColLen === 1) {
        return 'border_lb_none'
      }
      if (index % menuColLen === 0) {
        return 'border_b_none'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$hover_bg: #f7f7f7;
$border_color:#e6e6e6;
$border_radius: 2px;
.q_menu{
  width: 100%;
  ul{
    padding: 0; margin: 0;
    .border_lt{
      border-bottom: none;
    }
    .border_rt{
      border-bottom: none;
      border-left: none;
    }
    .border_rb{
      border-left:none;
    }
    .border_lb_none{
      border-left: none;
      border-bottom: none;
    }
    .border_b_none{
      border-bottom: none;
    }
    li{
      width: 50%; height: 100px;
      text-align: center;
      border: $border_color solid 1px;
      float: left;
      .title{ font-weight: bold; }
      a{
        height: 100%;
        display: block;
        padding: 14px 0;
      }
      a:hover{
        background:$hover_bg;
      }
      i{font-size: 28px;}
      p{ padding: 0; margin: 0;}
    }
  }
}
</style>
